<!--
 * 语言新建/编辑弹窗
-->
<template>
  <el-dialog
    :title="dialogData.type == 'ADD' ? '新增语言' : '编辑语言'"
    :visible.sync="dialogData.show"
    :before-close="handleClose"
    width="520px"
    append-to-body
  >
    <el-form ref="langInfoForm" :model="langInfoForm" :rules="rules">
      <el-form-item label="语言名称（中文）：" prop="chineseName">
        <el-input
          class="input-area"
          v-model="langInfoForm.chineseName"
          placeholder="请输入语言名称（中文）"
          maxlength="24"
        ></el-input>
      </el-form-item>
      <el-form-item
        label="语言名称（本国语）："
        prop="nativeName"
        style="margin-top: 20px; margin-bottom: 20px"
      >
        <el-input
          class="input-area"
          v-model="langInfoForm.nativeName"
          placeholder="请输入语言名称（本国语）"
          maxlength="24"
        ></el-input>
      </el-form-item>
      <el-form-item label="ISO 639 语言代码：" prop="i18nCode">
        <el-input
          class="input-area"
          v-model="langInfoForm.i18nCode"
          placeholder="请输入ISO 639 语言代码"
          maxlength="16"
        ></el-input>
      </el-form-item>
      <el-form-item style="margin-top: 10px;">
        <el-checkbox v-model="langEnableChecked" style="margin-left: 10px"
          >启用</el-checkbox
        >
        <el-checkbox v-model="defaultI18nChecked" style="margin-left: 20px"
          >设为默认语言</el-checkbox
        >
        <div
          v-if="langEnableChecked"
          style="
            color: #ff000dff;
            font-size: 12px;
            margin-left: 10px;
            line-height: 16px;
          "
        >
          注：后台所有已发布的内容，请尽快完成对该语言的补充！
        </div>
      </el-form-item>
      <div class="line-center">
        <el-button class="dialog-btn" @click="handleClose" plain
          >取消</el-button
        >
        <el-button
          class="dialog-btn"
          style="margin-left: 8px"
          @click="dialogConfirm"
          type="primary"
          v-preventReClick
          >确认</el-button
        >
      </div>
    </el-form>
  </el-dialog>
</template>

<script>
//接口
import { createLang, editLang } from "@/api/lang_manage";

export default {
  props: {
    dialogData: {
      type: Object,
    },
  },
  data() {
    return {
      langEnableChecked: false,
      defaultI18nChecked: false,
      langInfoForm: {
        status: "DISABLE",
        chineseName: "",
        nativeName: "",
        code: "",
      },
      rules: {
        chineseName: [
          {
            required: true,
            message: "请输入语言名称（中文）",
            trigger: "blur",
          },
        ],
        nativeName: [
          {
            required: true,
            message: "请输入语言名称（本国语）",
            trigger: "blur",
          },
        ],
        i18nCode: [
          {
            required: true,
            message: "请输入ISO 639 语言代码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  watch: {
    "dialogData.show": {
      immediate: true,
      handler: function (val, oldVal) {
        if (val) {
          //每次都先重置再赋值
          this.langInfoForm = {
            status: "DISABLE",
            chineseName: "",
            nativeName: "",
            code: "",
          };
          this.langEnableChecked = false;
          this.defaultI18nChecked = false;
          if (this.dialogData.type == "EDIT") {
            this.langInfoForm = this.dialogData;
            this.langEnableChecked = this.dialogData.status == "ENABLE";
            this.defaultI18nChecked = this.dialogData.defaultI18n;
          }
        }
      },
    },
  },
  mounted() {},
  methods: {
    //关闭弹窗
    handleClose() {
      this.$confirm("确认关闭？")
        .then((_) => {
          this.dialogData.show = false;
        })
        .catch((_) => {});
    },
    //确认按钮
    dialogConfirm() {
      switch (this.dialogData.type) {
        case "ADD": {
          //创建新语言
          this.handleCeateLang();
          break;
        }
        case "EDIT": {
          //编辑新语言
          this.handleEditLang();
          break;
        }
        default: {
          this.$message.error("异常弹窗");
          break;
        }
      }
    },
    //新建语言
    handleCeateLang() {
      this.$refs.langInfoForm.validate((valid) => {
        if (valid) {
          //如果勾选了默认语言 则必须勾选启用
          if (this.defaultI18nChecked && !this.langEnableChecked) {
            this.$message.warning("默认语言必须启用才可新增");
            return false;
          }
          //校验通过,创建新语言
          createLang({
            ...this.langInfoForm,
            enable: this.langEnableChecked,
            defaultI18n: this.defaultI18nChecked,
          })
            .then((response) => {
              this.$emit("dialogConfirm");
              this.dialogData.show = false;
              this.$message.success("新建成功");
            })
            .catch(() => {
            });
        } else {
          return false;
        }
      });
    },
    //编辑语言
    handleEditLang() {
      this.$refs.langInfoForm.validate((valid) => {
        if (valid) {
          console.log("this.defaultI18nChecked",this.defaultI18nChecked);
          //如果勾选了默认语言 则必须勾选启用
          if (this.defaultI18nChecked && !this.langEnableChecked) {
            this.$message.warning("默认语言必须为启用状态");
            return false;
          }
          //校验通过,创建新语言
          editLang({
            ...this.langInfoForm,
            enable: this.langEnableChecked,
            defaultI18n: this.defaultI18nChecked,
            i18nId: this.langInfoForm.id,
          })
            .then((response) => {
              this.$emit("dialogConfirm");
              this.dialogData.show = false;
              this.$message.success("修改成功");
            })
            .catch(() => {
            });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep {
  .el-dialog__title {
    font-weight: normal;
  }

  .el-form-item {
    margin-bottom: 0;
  }

  .el-dialog__body .el-form-item__label {
    line-height: 20px;
  }

  // 输入框配置
  .el-input__inner {
    height: 48px;
    margin-top: 8px;
  }

  .el-dialog__body {
    padding: 24px;
  }
}

.form-item-mobile {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  background: rgba(255, 255, 255, 1);
  color: #fff;
  margin-bottom: 0px;
  border-radius: 4px;
  border: 1px solid #dfe5ee;
}

.dialog-root {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.input-area {
  width: 100%;
}

.line-center {
  width: 100%;
  margin-top: 24px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.dialog-btn {
  height: 32px;
  width: 120px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: center;
}
</style>